<template>
	<div>
		<van-nav-bar title="工作" />
		<div v-for="categoryItem in menu.children" :key="categoryItem.id">{{categoryItem.name}}
			<van-grid :column-num="4">
				<van-grid-item v-for="menuItem in categoryItem.children" :key="menuItem.id" @click="onItemClickHandler(menuItem)">
					<van-image :src="menuItem.imageUrl" style="width:48px;height:48px;"/>
					<span>{{menuItem.name}}</span>
				</van-grid-item>
			</van-grid>
		</div>
	</div>
</template>

<script>
	import constants from '@/utils/constants.js';
	import restUtil from '@/utils/restUtil.js';
	import {
		Dialog
	} from 'vant';
	export default {
		name: "MMenu",
		data() {
			return {
				menu: {}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				var that = this;
				restUtil.getAction(this,"mmenu/init").then(
					function(response) {
						if (response.data.code == 1) {
							for(var i=0;i<response.data.menu.children.length;i++){
								var categoryItem=response.data.menu.children[i];
								for(var j=0;j<categoryItem.children.length;j++){
									categoryItem.children[j].imageUrl=constants.ROOT_URL + 'mmenu/getMenuIconContent?menuId='+categoryItem.children[j].id+'&X-Token='+ window.localStorage.getItem('token');
								}
							}
							that.menu = response.data.menu;
						} else {
							Dialog.alert({
								title: '提示',
								message: response.data.message,
							}).then(() => {
								// on close
							});
						}
					});
			},onItemClickHandler(item){
				var that = this;
				restUtil.getAction(this,"mmenu/getPageCodeByMenuId?menuId=" + item.id).then(
					function(response) {
						if (response.data.code == 1) {
							if(response.data.menuType=="serverpage"){
								that.$store.state.mobileMain.loadServerPage(response.data.pageCode);
							}else if(response.data.menuType=="clientpage"){
								that.$store.state.mobileMain.loadClientPage(response.data.pageCode);
							}
						} else {
							that.$alert(response.data.message, '提示')
						}
					});
			}
		},
	}
</script>

<style>
</style>
